<template>
    <div class="special">
        <div class="left">
            <div class="slideList">
                <div class="sortButton" v-for="(v,index) in buttonList" :key="index">
                    <div class="imgBox" :class="{borderLine:current==index}" @click="fun(v,index)">
                        <img :src="v.img" alt="">
                    </div>
                    <p>{{ v.content }}</p>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="topNav">
                <div class="bx">
                    <p>{{ des }}</p>
                    <div>
                        <img src="https://gw.alicdn.com/imgextra/i1/O1CN01J92nrF1ITUpuItJ04_!!6000000000894-2-tps-47-40.png" alt="">
                        <p>源头低价 买贵必赔</p>
                    </div>
                </div>
            </div>
            <div class="bottom">
                
                <List v-for="(v, index) in arr" :key="index" :img1="v.img1" :proname="v.proname" :originprice="v.originprice" :sales="v.sales" :flag="true" @click.native="goDetail1(v)"></List>
                
               
            </div>
        </div>
    </div>
</template>

<script>
import List from '@/components/xn/HomeCom/Goods/List.vue';
export default {
    name:"specialSale",
    data(){
        return{
            buttonList:[],
            current:0,
            des:"特卖精选",
            // 内容数据
            arr:[]
        }
    },
    methods:{
        fun(v,index){
            this.current = index
            this.des = v.content
            let count = index + 1
            this.$http({
            url:`http://118.178.238.19:3001/api/pro/recommendlist`,
            method:"get",
            params:{
                count:count
            }
        }).then(res=>{
            this.arr = res.data.data
            console.log(res.data.data)
        })
        },
        goDetail1(v) {
         this.$router.push({
            path: '/detail',
            query: {
               delList: JSON.stringify(v)
            }
         })
        },
    },  
    mounted(){
        // 左边导航
        this.$http({
            url:`http://localhost:3000/specialLeft`,
            method:"get"
        }).then(res=>{
            this.buttonList = res.data
        }),
        // 右边内容
        this.$http({
            url:`http://118.178.238.19:3001/api/pro/recommendlist`,
            method:"get",
            params:{
                count:1
            }
        }).then(res=>{
            this.arr = res.data.data
            console.log(res.data.data)
        })
    },
    components:{
        List
    }
}
</script>

<style lang="scss" scoped>
    .special {
        background: #f3f3f3;
        width: 100%;
        height: 8.7rem;
        border-top-left-radius: 0.45rem;
        border-top-right-radius: 0.45rem;
        display: flex;
    }
    .special .left {
        width: 1.22rem;
        height: 8.67rem;
        overflow: hidden;
        max-height: 100vh;
    }
    .special .left .slideList {
        width: 0.96rem;
        height: 8.38rem;
        max-height: 100vh;
        overflow: auto;
        margin: 0.29rem auto 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        
    }
    .special .left .slideList .sortButton {
        width: 100%;
        height: 1.29rem;
        margin-bottom: 0.4rem;
    }
    .special .left .slideList .sortButton .imgBox {
        width: 0.95rem;
        height: 0.95rem;
        border-radius: 50%;
        overflow: hidden;
        box-sizing: border-box;
    }
    .special .left .slideList .sortButton .imgBox img {
        width: 0.95rem;
        height: 0.95rem;
    }
    .special .left .slideList .sortButton .borderLine {
        border: 0.07rem solid red;
    }
    .special .left .slideList .sortButton p {
        font-size: 0.24rem;
        color: #6d6d6d;
        margin-top: 0.08rem;
    }
    .special .right {
        width: 6.29rem;
        height: 8.67rem;
        // overflow-y: auto;
    }
    .special .right .topNav{
        width: 100%;
        height: 0.9rem;
    
    }
    .special .right .topNav .bx {
        width: 5.86rem;
        height: 100%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .special .right .topNav .bx>p {
        color: #333333;
        font-size: 0.34rem;
    }
    .special .right .topNav .bx>div {
        color: #a0a0a0;
        font-size: 0.24rem;
        display: flex;
        align-items: center;
    }
    .special .right .topNav .bx>div img {
        width: 0.25rem;
        height: 0.21rem;
        margin-right: 0.08rem;
    }
    .special .right .bottom {
        width: 6.1rem;
        column-count: 2;
        overflow: auto;
        margin: auto;     
    }
</style>